<!--
09、Vue：按键修饰符
> 目标: 掌握按键修饰符的使用

- 语法: @html元素事件名把前面的on去掉.按键修饰符=”函数名()”
- 例如: @keydown.enter=”fun1()” 或 @keyup.enter=”fun1()”
Vue.js允许在绑定事件时可以指定具体的按键事件，按键别名:

- .enter (回车键)
- .tab  (Tab键)
- .delete (捕获 "删除" 和 "退格" 键)
- .esc  (Esc键)
- .space (Space键)
- .up (向上键)
- .down (向下键)
- .left (向左键)
- .right (向右键)
- .ctrl (Ctrl键)
- .alt (Alt键)
- .shift (Shift键)
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs按键修饰符</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- 判断按下了什么键才触发事件：
           @keydown.enter: 按下了回车键
           $event: Vue事件对象
       -->
    姓名:<input type="text" @keydown.enter="fun1($event)"/>
</div>

<script type="text/javascript">
    var vue = new Vue({
        el: '#app', // 渲染的html元素
        methods: {
            fun1(e) {
                alert("按下了回车键" + e.keyCode);
            }
        }
    });
</script>
</body>
</html>